<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<meta http-equiv="Cache" content="no-cache" />
		<link rel="icon" href="favicon.ico" />
		<title>表达式-演示</title>
		<link rel="stylesheet" type="text/css" href="../w/static/layui/css/layui.css" />
		<style type="text/css">
		</style>
	</head>
	<body>
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">表达式测试</div>
				<div class="layui-card-body">
					<div>
						<button type="button" id="btn_del" class="layui-btn layui-btn-danger">删除末尾</button>
						<button type="button" id="btn_reckon" class="layui-btn">计算</button>
					</div>

					<fieldset class="layui-elem-field">
					  <legend>元素组</legend>
					  <div id="btn_list" class="layui-form">
					    <input name="str" style="width: 5em;display: inline;" autocomplete="off" placeholder="文字" class="layui-input">
					    <input name="num" lay-verify="number" style="width: 5em;display: inline;" autocomplete="off" placeholder="数字" class="layui-input">

						</div>
					</fieldset>

					<fieldset class="layui-elem-field">
					  <legend>函数区</legend>
					  <div id="fun_list" style="min-height: 100px;background-color: #93D1FF;">
							函数 =
						</div>
					</fieldset>
					<fieldset class="layui-elem-field">
					  <legend>函数预览</legend>
					  <div id="fun_view" style="min-height: 50px;background-color: #aaff7f;"></div>
					</fieldset>
					<fieldset class="layui-elem-field">
					  <legend>参数预览</legend>
					  <div id="param_view" style="min-height: 50px;background-color: #aaff7f;"></div>
					</fieldset>
					<fieldset class="layui-elem-field">
					  <legend>函数验证</legend>
					  <div id="fun_res" style="min-height: 50px;background-color: #aaaa7f;"></div>
					</fieldset>

					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
					  <legend>参数集合</legend>
					</fieldset>
					<form class="layui-form layui-row" id="param_list" action="">
					</form>

				</div>
			</div>
		</div>
	</body>
	<script src="../w/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['form','table','jquery'], function() {
			var form = layui.form,table = layui.table,$=layui.jquery;
			//自定义元素，需要ql引擎可以解析的
			var zyl_list = [
				{name:"（",value:"(",type:"fuhao"},
				{name:"）",value:")",type:"fuhao"},
				{name:"的",value:".",type:"fuhao"},
				{name:"文字",value:"S",type:"ziduan"},
				{name:"数字",value:"N",type:"ziduan"},
				{name:"日期",value:"D",type:"ziduan"},
				{name:"金额",value:"M",type:"ziduan"},
				{name:"加",value:"+",type:"yusuan"},
				{name:"减",value:"-",type:"yusuan"},
				{name:"乘",value:"*",type:"yusuan"},
				{name:"除",value:"/",type:"yusuan"},
				{name:"是",value:"==",type:"bijiao"},
				{name:"不是",value:"!=",type:"bijiao"},
				{name:"并且",value:"&&",type:"bijiao"},
				{name:"或者",value:"||",type:"bijiao"},
			];
			//元素按钮装载区，函数集合区，函数值集合，函数预览区
			//参数预览区，函数中字段name集合，函数中type集合，函数中字段输入集合
			var btnDiv = $('#btn_list'),funDiv = $('#fun_list'),funArr = []
			,funView = $('#fun_view'),paramView = $('#param_view'),paramArr = [],paramType=[]
			,paramForm = $('#param_list');
			//自定义元素，装载到页面
			zyl_list.forEach(function(item,index,arr){
				var b = $('<button type="button" class="layui-btn layui-btn-radius" data-val="'+
					item.value+'" data-type="'+item.type+'" >'+item.name+'</button>');
				btnDiv.append(b);
			});
			//可计算的元素集合，拼接后eval()可执行
			var arr = [];

			//填充输入框
			function inputTxt(label,id){
				return '<div class="layui-inline layui-col-3"><label class="layui-form-label">'
			+label+'<div class="layui-input-inline"><input class="layui-input" name="'+id+'" id="'+
			id+'"> </div> </div>';
			}
			//函数区展示函数内容，其他集合内容填充
			function addBtn(name,val,type){
				var b = $('<span class="layui-badge layui-bg-green">'+name+'</span>');
				funArr.push(name);
				funDiv.append(b);
				paramType.push(type);
				//如果是字段元素，修改填充方式，并页面参数集合填充输入框
				if(type == 'ziduan'){
					var v = val+'_'+paramArr.length;
					var label = "参数"+ paramArr.length + '('+name+')';
					paramArr.push(v);
					arr.push(v);
					paramView.text(paramArr.join(','));
					paramForm.append($(inputTxt(label,v)));
				}else{
					arr.push(val);
				}
				funView.text(arr.join(' '));
			}
			//自定义元素，绑定点击事件
			$('#btn_list button').on('click',function(){
				var that = $(this);
				addBtn(that.text(),that.attr('data-val'),that.attr('data-type'));
			});
			//文字输入框监听回车
			$('#btn_list input[name="str"]').keydown(function(e){
				if(e.keyCode == 13 && that.val() != '' && that.val().length > 0){
					 var that = $(this);
					 addBtn(that.val(),'"'+that.val()+'"','zhi');
					 that.val('');
				}
			});
			//数字输入框监听回车
			$('#btn_list input[name="num"]').keydown(function(e){
				var that = $(this);
				if(e.keyCode == 13 && that.val() != '' && that.val().length > 0){
					 addBtn(that.val(),that.val(),'zhi');
					 that.val('');
				}
			});
			//计算按钮
			$("#btn_reckon").on('click',function(){
				$('#fun_res').text(eval(arr.join('')));
			});
			//删除集合和函数区末尾元素
			$("#btn_del").on('click',function(){
				if(funArr.length > 0){
					funArr.pop();
					arr.pop();
					funDiv.children()[funDiv.children().length-1].remove();
					funView.text(arr.join(' '));
					if(paramType.pop() == 'ziduan'){
						paramArr.pop();
						paramView.text(paramArr.join(','));
					}
				}
			});
			$('#param_list input').on('keydown',function(e){
				if(e.keyCode == 13){
					console.dir($(this).val())
				}
			});

		})
	</script>
</html>
